<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>达人详情</title>
    <!-- <link rel="stylesheet" type="text/css" href="../../css/aui.css" /> -->
    <link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/font_777370_audsnzfwaw8.css">
    <link rel="stylesheet" type="text/css" href="https://www.haodanku.com/Public/assets/home/css/commodity.css?t=20190325">
    <link rel="stylesheet" type="text/css" href="../../css/swiper.css" />

    <style>
        body,
        html {
            height: 100%;
            position: absolute;
            width: 100%;

        }

        html {
            font-size: 8px;
        }

        body {
            max-width: 640px;
            margin: auto;
        }

        body img {
            width: 100%;
            margin: auto;
        }

        body p img {
            display: block;
        }

        .commodity-info img,
        .single-info img,
        .single-info-one img {
            display: block;
        }

        .article-page-write p {
            color: #635959;
            font-size: 14px;
            line-height: 32px;
            margin: 0;
            text-align: justify;
        }

        .article-container {
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
            word-break: break-all;
        }

        .article-page-banner {
            width: 100%;
            display: block;
        }

        .article-page-write {
            background: #fff;
            padding: 1rem 1.6rem;
        }

        .article-long-title {
            font-size: 2.4rem;
            color: #3c2b2a;
            margin: 16px 0;
        }

        .article-message {
            font-size: 1.6rem;
            color: #999;
        }

        .headinfo {
            display: flex;
            justify-content: space-between;
        }

        .headinfo>span {
            display: inline-flex;
            align-items: center;
        }

        .head-image {
            margin: 0 6px 0 0;
            border-radius: 50%;
            width: 36px;
            height: 36px;
            padding: 0;
            border: 1px solid #eee;
        }

        .personal {
            display: inline-flex;
            align-items: center;
        }

        .personal>span {
            font-size: 14px;
            color: #635959;
            margin-right: 1rem;
        }

        .preview i {
            font-size: 18px;
            color: #999;
            margin-right: 4px
        }

        hr {
            border: 1px solid #857d7d;
            border-top: 0;
            width: 46px;
            margin: 24px 0 38px 0;
        }

        .article-short-title {
            font-size: 14px;
            color: #635959;
            line-height: 22px;
            letter-spacing: 1px;
        }

        .article-short-title span {
            color: #797171;
        }

        .article-newpage-write {
            margin-top: 2.4rem;
        }

        .article-newpage-write img {
            width: 100% !important;
            height: auto !important;
        }

        .single-info img {
            width: 118px !important;
            height: 118px !important;
        }

        a {
            text-decoration: none;
        }

        .shadow {
            display: flex;
            align-items: center;
            justify-content: center;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
        }

        .shadowtext {
            color: #fff;
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background: rgba(83, 64, 64, .6);
            display: inline-flex;
            justify-content: center;
            align-items: center;
            font-weight: 600;
            font-size: 22px;
            letter-spacing: 1px;
            display: none;
            z-index: 10;
        }

        .single-info .commodity-info {
            margin: 1rem 0;
        }

        .article-newpage-write>div {
            color: #635959;
            font-size: 14px;
            line-height: 24px;
            margin: 0;
            text-align: justify;
        }

        .article-newpage-write .am-g,
        .article-newpage-write .single-content,
        .article-newpage-write .single-content-one {
            line-height: normal;
            margin: 0 auto;
        }

        .am-g {
            width: 100% !important;
        }

        .am-g .commodity-message {
            padding-bottom: 0 !important;
        }

        ! * 底部 *! .footer {
            position: fixed;
            right: 0;
            bottom: 1rem;
            display: flex;
            justify-content: space-between;
            align-items: flex-end;
            flex-direction: column;
            padding: 0 1rem;
            box-sizing: border-box;
            z-index: 1000;
        }

        .commodity-list-btn,
        .return-page {
            width: 50px;
            height: 50px;
            color: #fff;
            background: rgba(255, 95, 74, .8);
            font-size: 1.8rem;
            border-radius: 1000px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .commodity-modal {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 1002;
            background: rgba(0, 0, 0, .4);
            display: none;
        }

        .commodity-content {
            position: absolute;
            bottom: -100%;
            width: 100%;
            padding: 1.5rem;
            background: rgba(255, 255, 255, .9);
            box-sizing: border-box;
            border-top-left-radius: 1rem;
            border-top-right-radius: 1rem;
            z-index: 1005;
            display: none;
        }

        .commodity-content header {
            position: relative;
            padding-bottom: 1.5rem
        }

        .commodity-content header span {
            font-size: 2rem;
        }

        .commodity-list {
            height: 380px;
            overflow-y: scroll;
        }

        .commodity-item {
            display: flex;
            background: #fff;
            border-radius: 6px;
            margin-bottom: 1rem;
        }

        .commodity-item:last-child {
            margin-bottom: 0
        }

        .commodity-img {
            width: 100px;
            height: 100px;
            border-top-left-radius: 6px;
            border-bottom-left-radius: 6px
        }

        .commodity-item-info {
            display: inline-flex;
            flex-direction: column;
            justify-content: space-around;
            width: calc(100% - 100px);
        }

        .commodity-title {
            width: 100%;
            font-size: 2rem;
            color: #333;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
            text-align: ellipsis;
            overflow: hidden;
        }

        .commodity-item-price {
            font-size: 1.8rem;
            color: #635959;
        }

        .commodity-bottom {
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 1.5rem;
        }

        .commodity-couponmoney {
            border: 1px solid #ff3c00;
            color: #ff3c00;
            padding: 0 3px;
        }

        .commodity-ticket {
            border-right: 1px dashed #ff3c00;
            padding-right: 3px;
        }

        .commodity-sale {
            color: #999;
        }

        .other-list>span {
            position: relative;
            background: rgba(255, 95, 74, .8);
            width: 50px;
            height: 50px;
            border-radius: 1000px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
        }

        .other-list {
            display: flex;
            margin-top: 1rem;
        }

        .like i {
            font-size: 22px;
            color: #fff;
        }

        .like-num {
            color: #fff;
            font-size: 14px;
        }

        .return-page {
            margin-top: 1rem;
        }

        .return-page a {
            color: #fff !important;
        }

        .end {
            position: relative;
            width: 100%;
            background: #FFF url(http://img-haodanku-com.cdn.fudaiapp.com/Fnc6K2cd4bpMYJlyDAI5JLJtsTM5) no-repeat;
            background-size: 100%;
            background-position: bottom left;
        }

        .end-content {
            text-align: center;
            padding-top: 3rem;
        }

        .end-content img {
            width: 90px;
            height: 90px;
            border-radius: 1000px;
            display: block;
        }

        .end-content>span {
            font-size: 14px;
            color: #666;
            margin: 12px 0;
            display: block;
            text-align: center;
            letter-spacing: 1px;
        }

        .homepage {
            font-size: 14px;
            color: #f74d61;
            display: inline-flex;
            align-items: center;
            padding: 4px 16px;
            margin-bottom: 12px;
            border: 1px solid #f74d61;
            border-radius: 1000px;
            cursor: pointer;
        }

        .homepage>.iconfont {
            position: relative;
            top: 1px;
            font-size: 14px;
            margin-right: 2px;
        }

        .banner {
            width: 100%;
            overflow: hidden;
        }

        .banner_inner {
            width: 100%;
            height: 140px;
        }

        .banner_inner>.swiper-container {
            width: 100%;
            height: 140px;
        }

        .banner_inner>.swiper-container>.swiper-wrapper>.swiper-slide {
            width: 100%;
            height: 140px;
        }

        .banner_inner>.swiper-container>.swiper-wrapper>.swiper-slide>img {
            display: block;
            width: 100%;
            height: 100%;
        }

        .banner_inner>.swiper-container-horizontal>.swiper-pagination-bullets,
        .swiper-pagination-custom,
        .swiper-pagination-fraction {
            bottom: 0px;
            left: 0;
            width: 100%;
        }

        .banner_inner>.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet {
            width: 10px;
            height: 2px;
            display: inline-block;
            border-radius: 2px;
            background: #999999;
            opacity: 1;
        }

        .banner_inner>.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet-active {
            opacity: 1;
            background: #fff;
        }

        .talentinfo {
            width: 100%;
            display: flex;
            justify-content: space-between;
            padding: 0 15px;
            box-sizing: border-box;
            overflow: hidden;
            margin-top: 21px;
        }

        .talentinfo_l {
            flex: 1;
            display: flex;
        }

        .talentinfo_l .head_img {
            width: 45px;
            height: 45px;
            border-radius: 50%;

        }
        .talentinfo_l .head_img img{
            width: 45px;
            height: 45px;
            border-radius: 50%;

        }

        .talentinfo_l .info {
            margin-left: 8px;
        }

        .talentinfo_l .info div {
            width: auto;
            height: 13px;
            font-size: 12px;
            font-family: PingFang SC;
            font-weight: 500;
            color: #333333;
            line-height: 13px;
            margin-top: 5px;
        }

        .talentinfo_l .info div:last-child {
            margin-top: 8px;
            color: #999;
        }

        .talentinfo_r {
            display: flex;
        }

        .talentinfo_r .browse_icon {
            width: 16px;
            height: 10px;
            margin-top: 17.5px;
            margin-left: auto;
        }

        .talentinfo_r .browse_icon img {
            width: 100%;
            height: 100%;
            display: block;
        }

        .talentinfo_r .browse_amount {
            width: auto;
            height: 45px;
            font-size: 12px;
            font-family: PingFang SC;
            font-weight: 400;
            color: #999999;
            line-height: 45px;
        }
    </style>

    <script type="text/javascript" src="../../script/jquery.min.js"></script>
</head>

<body>
    <div id="app">
        <div class="banner">
            <div class="banner_inner">
                <div class="swiper-container swiper4">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide"  @click='SwiperJumpLink(item.urlType,item.url)'><img :src="articleBanner" alt=""></div>
                    </div>
                </div>
            </div>
        </div>

        <div class="talentinfo">
            <div class="talentinfo_l">
                <div class="head_img"><img :src="headImg" alt=""></div>
                <div class="info">
                    <div>{{talentName}}</div>
                    <div>{{addtime}}</div>
                </div>
            </div>
            <!-- <div class="talentinfo_r">
                <div class="browse_icon"><img src="../../image/browse_icon.png" alt=""></div>
                <div class="browse_amount">1000</div>
            </div> -->
        </div>
        <div class="article-content">
            <div class="article-newpage-write">
                <span v-html="content"></span>
            </div>
        </div>
    </div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/vue.js"></script>
<script type="text/javascript" src="../../script/cling.js"></script>
<script type="text/javascript" src="../../script/axios.min.js"></script>
<script type="text/javascript" src="https://www.haodanku.com/Public/assets/home/js/inobounce.min.js"></script>
<script type="text/javascript" src="../../script/swiper-bundle.min.js"></script>
<script>
    var aa;
    apiready = function() {
        aa = api.pageParam.id;
        //vm.id=api.pageParam.id;
        // vm.initBanner();


        var vm = new Vue({
            el: "#app",
            data: {
                "content": "",
                articleBanner:'',
                talentName :'',
                headImg:'',
                addtime:'',
                name:''
            },
            methods: {
                initBanner: function() {
                    var swiper = new Swiper('.swiper4', {
                        pagination: {
                            el: '.swiper-pagination',
                            clickable: true,
                        },
                        autoplay: {
                            delay: 3000,
                            disableOnInteraction: false,
                            waitForTransition: true,
                        },
                        on: {
                            slideChangeTransitionStart: function() {
                                //可以读取到当前活动的下班标
                                var num = this.activeIndex;
                                vm.currentFun(num);

                            },
                        },
                        freeMode: false,
                        touchRatio: 1,
                        observeParents: true,
                        observer: true,
                        loop: true,
                    });
                }
            },

            mounted() {
                axios({
                    method: "post", //请求方式
                    url: cl.apiServer + 'doumee/talentInfo/talent_article', //请求路径
                    params: {
                        "id": aa

                    }

                    //传递参数
                    //使用 箭头表达式=> 在代替原有的function来做回调函数
                }).then(result => {
                    data = result.data;
                    console.log(JSON.stringify(result.data));
                    this.content = data.data.articleLabel;
                    this.articleBanner = data.data.articleBanner;
                    this.talentName = data.data.talentName;
                    this.headImg = data.data.headImg;
                    this.addtime = data.data.addtime;
                    this.name = data.data.name;
                    this.$nextTick(() => {
                        $(document).ready(function() {
                            // 隐藏部分敏感数据
                            $('.single-message').remove();

                        })

                        // 图片超出处理
                        $(function() {
                            var articleWidth = $('.article-page-write').width();
                            $('p img').each(function() {
                                if ($(this).width() > articleWidth) {
                                    $(this).css({
                                        width: '100%',
                                        height: 'auto'
                                    });
                                }
                            });
                        });

                        $(function() {
                            // 多个宝贝 - 只展示券后价
                            $('.commodity-message').each(function() {
                                var mobilePrice = $(this).find('.price').text(); // 旧版专属

                                var commodity_priceStr = '<span class="mobile-coupon">券后 <span class="mobile-price price"></span></span>' +
                                    '<span class="mobile-sold">已售 <span class="itemsale"></span></span>';
                                var coupon_str = '<div class="coupon-box">' +
                                    '<span class="coupon-style"><span>券</span><span class="coupon"></span></span>' +
                                    '<span class="commodity-view">查看</span>' +
                                    '</div>';
                                $(this).html(commodity_priceStr);
                                $(this).after(coupon_str);

                                if ($('.commodity-bottom').length > 0) {
                                    $(this).find('.price').text(mobilePrice + '元');
                                }
                            });

                            // 单个宝贝一 - 只展示券后价
                            $('.single-info-one').each(function() {
                                var single_priceStr = '<span class="mobile-coupon">券后 <span class="mobile-price price"></span></span>' +
                                    '<span class="mobile-sold">已售 <span class="itemsale"></span></span>';
                                var coupon_str = '<div class="coupon-box">' +
                                    '<span class="coupon-style"><span>券</span><span class="coupon"></span></span>' +
                                    '<span class="commodity-view">查看</span>' +
                                    '</div>';
                                $(this).find('.single-coupon-one').html(single_priceStr);
                                $(this).find('.single-coupon-one').after(coupon_str);
                            });

                            // 单个宝贝二 - 只展示券后价
                            $('.single-info').each(function() {
                                var single_priceStr = '<span class="mobile-coupon">券后 <span class="mobile-price price"></span></span>' +
                                    '<span class="mobile-sold">已售 <span class="itemsale"></span></span>';
                                var coupon_str = '<div class="coupon-box">' +
                                    '<span class="coupon-style"><span>券</span><span class="coupon"></span></span>' +
                                    '<span class="commodity-view">查看</span>' +
                                    '</div>';
                                $(this).find('.single-coupon-two').html(single_priceStr);
                                $(this).find('.single-coupon-two').after(coupon_str);
                            });

                            // 兼容旧版本
                            $('.commodity-bottom').each(function() {
                                $(this).prev('.coupon-box').css('display', 'none');
                                $(this).prevAll('.commodity-message').children('.mobile-sold').remove();
                            })
                        });

                        $('.js_tobuy').click(function() {
                            var itemid = $(this).children('div').children('img').attr('data-itemid');
                            if (!itemid) {
                                itemid = $(this).children('img').attr('data-itemid');
                            }
                            // alert("商品id" + itemid);
                            // 判断是否为失效商品
                            var loseArr = data.data.invalidList;
                            if (loseArr.indexOf(itemid) > -1) {
                                //失效商品 不让进详情
                                alert("商品已下架");
                                return;
                            }
                            //console.log(itemid);return false;
                            // message[itemid]['tkrates'] = message[itemid]['tkrates']/100;
                            //   messageinfo = JSON.stringify(message[itemid]);
                            var ua = navigator.userAgent.toLowerCase();
                            if (/iphone|ipad|ipod/.test(ua)) {
                                //  window.webkit.messageHandlers.openProduct.postMessage({methodName:"openProduct","title":"文章详情","data":messageinfo,"type":0});
                                alert("我是IOS,跳转详情");
                            } else if (/android/.test(ua)) {
                                //  window.android.openProduct('文章详情',messageinfo,0);
                                cl.openWin({
                                    name: 'goods_deatils',
                                    pageParam: {
                                        id: itemid
                                    }
                                })
                            }
                        });

                        $(function() {
                            var itemid = $('.js_tobuy').children('div').children('img').attr('data-itemid');

                            var list = data.data.items;
                            for (var i = 0; i < list.length; i++) {
                                $('#itemid' + list[i].itemid + ' .price').text('￥' + Math.floor(list[i].itemendprice * 10) / 10);
                                $('#itemid' + list[i].itemid + ' .coupon').text(list[i].couponmoney);
                                $('#itemid' + list[i].itemid + ' .itemsale').text(list[i].itemsale);

                                //拼接未失效宝贝
                                var commodityStr = "<div class='commodity-item' data-itemid='" + list[i].itemid + "'><img src='" + list[i].itempic + "' alt='' class='commodity-img'>" +
                                    "<div class='commodity-item-info' style='padding: 0 1rem;'>" +
                                    "<span class='commodity-title'>" + list[i].itemshorttitle + "</span>" +
                                    "<span class='commodity-item-price'>券后<span>" + Math.floor(list[i].itemendprice * 10) / 10 + "</span>元</span>" +
                                    "<div class='commodity-bottom'>" +
                                    "<span class='commodity-couponmoney'>" +
                                    "<span class='ommodity-ticket'>券</span><span class='commodity-coupon'>￥" + list[i].couponmoney + "</span>" +
                                    "</span>" +
                                    "<span class='commodity-sale'>已售 <span class='itemsale'>" + list[i].itemsale + "</span></span>" +
                                    "</div>" +
                                    "</div>" +
                                    "</div>";
                                $('.commodity-list').append(commodityStr);
                            };
                        });


                        //提示商品失效
                        var lose = data.data.invalidList;
                        if (lose != null && lose != '') {
                            for (var i = 0; i < lose.length; i++) {
                                if ($('#itemid' + lose[i] + ' .shadow').length == 0) {
                                    $('#itemid' + lose[i] + ' .getitemid').after('<div class="shadow"><span class="shadowtext"></span></div>');
                                }
                                $('#itemid' + lose[i] + ' .shadowtext').css('display', 'inline-flex');
                                $('#itemid' + lose[i] + ' .shadowtext').text('已抢光');
                                $('#itemid' + lose[i]).removeClass('js_tobuy');

                                $('#itemid' + lose[i] + ' .price').text('￥' + "0");
                                $('#itemid' + lose[i] + ' .coupon').text("0");
                                $('#itemid' + lose[i] + ' .itemsale').text("999");

                            }
                        }



                    })

                })
            },
            methods: {



            }

        })
    }
</script>


</html>
